<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4399游戏中心</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Arial', sans-serif; background-color: #f5f5f5; color: #333; }
        .header { background-color: #ff6600; color: white; padding: 1rem; text-align: center; }
        .container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
        .game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; }
        .game-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
        .game-card:hover { transform: translateY(-5px); }
        .game-img { width: 100%; height: 150px; object-fit: cover; }
        .game-info { padding: 1rem; }
        .game-title { font-size: 1.2rem; margin-bottom: 0.5rem; }
        .game-desc { color: #666; font-size: 0.9rem; }
        .footer { text-align: center; margin-top: 3rem; padding: 1rem; color: #666; }
    </style>
</head>
<body>
    <header class="header">
        <h1>4399游戏中心</h1>
    </header>
    <main class="container">
        <section class="game-list" id="gameListContainer">
            <!-- 游戏卡片将通过JavaScript动态加载 -->
            <div class="loading">加载中...</div>
        </section>
        <script>
            // 页面加载完成后获取游戏列表
            document.addEventListener('DOMContentLoaded', function() {
                fetch('/game4399web/api/games')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不正常');
                        }
                        return response.json();
                    })
                    .then(games => {
                        const container = document.getElementById('gameListContainer');
                        container.innerHTML = ''; // 清空加载提示

                        if (games.length === 0) {
                            container.innerHTML = '<p class="no-games">暂无游戏数据</p>';
                            return;
                        }

                        // 动态创建游戏卡片
                        games.forEach(game => {
                            const card = document.createElement('div');
                            card.className = 'game-card';
                            card.innerHTML = `
                                <img src="${game.imageUrl || 'https://via.placeholder.com/300x150'}" alt="${game.title}" class="game-img">
                                <div class="game-info">
                                    <h3 class="game-title">${game.title}</h3>
                                    <p class="game-desc">${game.description || '暂无描述'}</p>
                                    <div class="game-meta">
                                        <span class="category">${game.categoryName || '未知分类'}</span>
                                        <span class="rating">评分: ${game.rating.toFixed(1)}</span>
                                    </div>
                                </div>
                            `;
                            container.appendChild(card);
                        });
                    })
                    .catch(error => {
                        console.error('获取游戏列表失败:', error);
                        document.getElementById('gameListContainer').innerHTML = '<p class="error">加载游戏失败，请稍后重试</p>';
                    });
            });
        </script>
    </main>
    <footer class="footer">
        <p>© 2025 4399游戏中心 - 模仿网站</p>
    </footer>
</body>
</html>